<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Supermap BUildings add GeoJson Data</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 553px;
            border:1px solid #3473b7;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script src="js/OSMBuildings-SuperMap.js"></script>
    <script type="text/javascript">
        var map, layer,osm,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";

        function init(){
            //检测浏览器是啥支持canves Buildings 需要Canvas绘制
            if(!document.createElement('canvas').getContext){
                alert("您的浏览器不支持Canvas,请先升级！");
                return;
            }
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.MousePosition(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Zoom()
            ]});

            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        }
        //异步加载图层
        function addLayer(){
            map.addLayers([layer]);
            map.setCenter(new SuperMap.LonLat(12957186.36784,4852711.53595), 12);

            // Supermap 底图上 添加默认的 OSMBuildings geojson 数据
            var geoJSON = {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "id": 134,
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [[
                                [116.39211,39.91289],
                                [116.39278,39.90844],
                                [116.39654,39.90860],
                                [116.39614,39.91305],
                                [116.39211,39.91289]
                            ]]
                        },
                        "properties": {
                            "wallColor": "#DDDDDD",
                            "roofColor": "#F9F7F4",
                            "height": 20,
                            "minHeight":0,
                            "roofHeight" : 5,
                            "roofShape" : "pyramid"
                        }
                    }]
            };

            osm=new OSMBuildings(map);
            osm.load();
            osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
            osm.set(geoJSON);
            osm.click(function (e) {
                // 返回当前点击的feature ID 和 当前的经纬度
                //Buildings 单击事件 返回当前Building的ID 和 经纬度
                alert("FeatureID:"+ e.feature);
            });
        }
    </script>
</head>
<body onLoad = "init()">
<div id = "map"></div>
</body>
</html>